<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <title>留言板</title>
    <style>
        .liuyan{
            margin-left: 340px;
        }
        .form-control{
            width: 1000px;
        }
        ul{
            margin:50px 0 50px 220px;
            list-style: none;
            font-size: 18px;
        }
        ul a{
            font-size: 18px;
        }
        .pagination{
            margin-left: 270px;
        }
    </style>
    <!--<script type="text/javascript" src="../public/js/template-native.js"></script>-->
</head>
<body>
    <h1>留言板</h1>
    <form class="form-horizontal" action="message">
        <div class="form-group">
            <label class="col-sm-2 control-label" id="name">姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="name"  placeholder="姓名">
            </div>
        </div>
        <div class="form-group">
            <textarea class="form-control liuyan" rows="3" name="message"></textarea>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-success">提交</button>
            </div>
        </div>
    </form>
    <hr>
    <nav aria-label="pagination ">
        <ul class="pagination">
            <%for(var i=0;i<page;i++){%>
            <li class="active"><a href="/page?page=<%=i+1%>"><%=i+1%><span class="sr-only">as dasd asd asd asd </span></a></li>
            <%}%>
        </ul>
    </nav>
    <hr>
    <% for (var i=0;i<allResults.length;i++){%>
    <ul>
        <li>【姓名】<%=allResults[i].name%></li>
        <li>【留言】<%=allResults[i].message%></li>
        <li>【时间】<%=allResults[i].time%></li>
        <li><a href="/del?_id=<%=allResults[i]._id%>">删除</a></li>
    </ul>
    <hr>
    <%}%>
</body>
<!--使用underscore模板-->
<script type="text/template" id="muban">
    <ul>
        <li>【姓名】{{=allResults[i].name}}</li>
        <li>【留言】{{=allResults[i].message}}</li>
        <li>【时间】{{=allResults[i].time}}</li>
        <li><a href="/del?_id={{=allResults[i]._id}}">删除</a></li>
    </ul>
</script>
<script src="js/jquery.min.js"></script>
<script src="js/underscore-no-min.js"></script>
<script type="text/javascript">
    //给第一个li添加class active
    $(".pagination li:first").addClass("active");
    var currPage = 1;
    getDataByPage(currPage);
    //定义根据页码追加数据方法
    function getDataByPage(page){
        $ajax({
            url:"/",
            data:{"page":page},
            success:function(data){
                //找到模板节点
                var complied = _.template($("#muban").html());
                //清空原先内容
                $("#allMessage").html("");
                //遍历所有data 往全部模板节点填充内容
                for(var i=0;i<data.length;i++){
                    var da = data[i];//{}
                    var str = complied({"name":da.name,"message":da.message,"time":time})
                    $("#allMessage").append($(str));
                }

            }
        });
    }
    //给页码节点添加事件
    $(".pagination li").on("click",function(){
        //点击时 获取当前页码 根据当前页码查询数据
        //获取页码
        currPage = parseInt($(this).attr("data-page"));
        //根据页码获取数据
        getDataByPage(currPage);
        $(this).addClass("active").siblings().removeClass("active");
    })
</script>
</html>